/**
 * Created by Will Bean on 2016/8/21.
 */
import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import TextInput from './TextInput'
import NavLink from './NavLink'
import CheckboxInput from './CheckboxInput'
import InputWithLabel from './InputWithLabel'
import TextareaInput from './TextareaInput'
import SelectInput from './SelectInput'
import FileInput from './FileInput'
import ImageWithState from './ImageWithState'
import Table from './Table'
import style from './addStore.css'

import { myAjax, ROOTURL } from '../publicAPI/publicAPI'

var shop;
var preview = false;

class ShopServiceEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            dname: "",
            cost0: 0,
            referencePrice: '',
            duration: 0,
            workload: 0,
            servicePrototype : 0,
            servicePrototypeData : {},
            prototypeServiceList : [],
            dd: true,
            nameCheck: false,
            dnameCheck: false,
            costCheck:false,
            durationCheck : false,
            workloadCheck: false,
            iconChangeCheck : false,
            descriptionCheck : false,
            pictureCheck : false,
            description: "",
            previewImgFiles: [],
            previewImgUrl: [],
            hasBeenMounted: false,  //判断是否已经加载
            delete: false,
            imgHash: [],
            icon: '',
            iconFile : null,
            iconPreview: '',
            iconHasChanged : false,

            //新添加的服务类型提成参数
            commissionValForONL: '',
            commissionValForOFL: '',
        };

        this.handleImgUpload.bind(this);
    }

    componentWillMount() {
        console.log("将安装", this.props.params.id);
        preview = false;
        if(this.props.params.preview && this.props.params.preview == 'Preview'){
            preview = true;
        }else if(this.props.params.preview){
            location.href = '/ShopServiceM'
        }
        var _this = this;

        if(this.props.params.ShopId){
            shop = this.props.params.ShopId
        }
        if(!this.state.hasBeenMounted){
            fetch(ROOTURL+'serv/prototype/search.api',{
                method: "POST",
                body: JSON.stringify({
                    "where": {"dd": [["eq", false]]},
                    "order": [["id","asc"]]
                })
            }).then(res=>{
                if(res.ok){
                    res.json().then(data=>{
                        _this.setState({
                            prototypeServiceList: data,
                            servicePrototype: data[0].id
                        });
                        this.handleSelectChange(data[0].id,false);
                        if (this.props.params.id) {
                            //    根据参数获取数据
                            this.handleGetInfo();
                        }
                    });
                }
            });
        }

        this.setState({
            hasBeenMounted:true
        })
    }

    componentDidMount() {
    }

    handleSelectChange(id,sel){
        var _this = this;
        fetch(ROOTURL+'serv/prototype/instance.api?id='+id,{
            method: "GET"
        }).then(res=>{
            if(res.ok){
                res.json().then(data => {
                    _this.setState({servicePrototypeData:data})
                });
            }
        });
        if(sel){
            this.setState({
                nameCheck: false,
                dnameCheck: false,
                costCheck:false,
                durationCheck : false,
                workloadCheck: false,
                iconChangeCheck : false,
                descriptionCheck : false,
                pictureCheck : false,
                referencePriceCheck : false
            })
        }
    }

    handleGetInfo() {
        var url = ROOTURL + 'serv/shop/aggregated/search.api?id=' + this.props.params.id;//使用默认值时用到
        var _this = this;
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({
                "where": {"id": [["eq", _this.props.params.id]] }
            })
        }).then(res=> {
            if (res.ok) {
                res.json().then(d=> {
                    console.log(d);
                    var data = d[0];
                    var newState = {
                        id: data.id,
                        name : data.name,
                        dname : data.dname,
                        description : data.meta.description,
                        workload : data.workload,
                        duration : this.changeToMin.bind(this)(data.duration),
                        imgHash : data.meta.hashed,
                        dd : !data.dd,
                        nameCheck: data.meta.checkbox.nameCheck,
                        dnameCheck: data.meta.checkbox.dnameCheck,
                        costCheck:data.meta.checkbox.costCheck,
                        referencePrice:data.meta.referencePrice,
                        durationCheck : data.meta.checkbox.durationCheck,
                        workloadCheck: data.meta.checkbox.workloadCheck,
                        iconChangeCheck : data.meta.checkbox.iconChangeCheck,
                        descriptionCheck : data.meta.checkbox.descriptionCheck,
                        referencePriceCheck : data.meta.checkbox.referencePriceCheck,
                        pictureCheck: data.meta.checkbox.pictureCheck,
                        icon : data.meta.icon,
                        cost0: data.cost0
                    };
                    if( data.servicePrototypeId ){
                        newState.servicePrototype = data.servicePrototypeId;
                    }
                    _this.setState(newState);
                    if(Object.keys(data.smeta.Commission).length!='0') {
                        Object.keys(data.smeta.Commission).forEach((commissionType) => {
                            if(/ONL$/.test(commissionType)) {
                               _this.setState({
                                    commissionForONL: commissionType,
                                    commissionValForONL: data.smeta.Commission[commissionType].amount||data.meta.Commission[commissionType].ratio,
                                });
                            } else if(/OFL$/.test(commissionType)) {
                                _this.setState({
                                    commissionForOFL: commissionType,
                                    commissionValForOFL: data.smeta.Commission[commissionType].amount||data.meta.Commission[commissionType].ratio,
                                });
                            }
                        });
                    }

                    var d = {};
                    for(var i = 0; i < 23; i++){
                        d['premium'+i] = data.meta.HourlyPremium.premiumsWeekday[i]
                    }
                    _this.setState(d);
                    shop = data.shopId;
                })
            }
        });
    }

    changeToMs(min){
        return parseInt(min*60000)
    }

    changeToMin(ms){
        return parseInt(ms/60000)
    }

    getOptions(){
        var arr = [];
        this.state.prototypeServiceList.map((store,index)=>{
            arr.push((<option key={index} value={store.id}>{store.dname}</option>))
        });
        return arr;
    }

    handleImgUpload(files) {
        var fileUrl = [];
        var _this = this;
        files.map(file=> {
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function (e) {
                fileUrl.push({src: e.target.result});

                //因异步操作存在多次渲染，待修改
                _this.setState(Object.assign({}, this.state, {
                    previewImgFiles: files,
                    previewImgUrl: fileUrl
                }));
            };
        });
    }

    handleIconUpload(files) {
        var _this = this;
        this.setState({iconHasChanged:true});
        files.map(file=> {
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function (e) {
                _this.setState(Object.assign({}, this.state, {
                    iconPreview: e.target.result,
                    iconFile : file
                }));
            };
        });
    }

    createStore() {
        //服务类型的提成字段
        let commissionForType = {
            "FixedCommissionONL": "amount", // 线上客单的定值提成
            "RatioCommissionONL": "ratio", // 线上客单的比例提成
            "FixedCommissionOFL": "amount", // 线下客单的定值提成
            "RatioCommissionOFL": "ratio", //线下客单的比例提成
        };
        //服务类型提成的正则判断
        if(commissionForType[this.state.commissionForONL] == 'amount') {
            if(!(/^[0-9]+\.?[0-9]*$/.test(this.state.commissionValForONL))) {
                alert('线上订单提成-按数值提成-数据格式错误');
                return 
            }
        } else if (commissionForType[this.state.commissionForONL] == 'ratio') {
            if(!(/^0$|^0\.[0-9]+$|^1$|^1\.0+$/.test(this.state.commissionValForONL))) {
                alert('线上订单提成-按比例提成-数据格式错误，正确取值范围为0~1');
                return 
            }
        }
        if(commissionForType[this.state.commissionForOFL] == 'amount') {
            if(!(/^[0-9]+\.?[0-9]*$/.test(this.state.commissionValForOFL))) {
                alert('线下订单提成-按数值提成-数据格式错误');
                return 
            }
        } else if (commissionForType[this.state.commissionForOFL] == 'ratio') {
            if(!(/^0$|^0\.[0-9]+$|^1$|^1\.0+$/.test(this.state.commissionValForOFL))) {
                alert('线下订单提成-按比例提成-数据格式错误，正确取值范围为0~1');
                return 
            }
        }

        var premium = [];
        for(var i = 0; i < 12; i++){
            premium.push(this.state['premium'+i]? parseInt(this.state['premium'+i]):0)
        }
        var meta = {
            description: this.state.description,
            hashed: this.state.imgHash,
            checkbox :{
                nameCheck: this.state.nameCheck,
                dnameCheck: this.state.dnameCheck,
                costCheck:this.state.costCheck,
                durationCheck : this.state.durationCheck,
                workloadCheck: this.state.workloadCheck,
                iconChangeCheck : this.state.iconChangeCheck,
                descriptionCheck : this.state.descriptionCheck,
                pictureCheck : this.state.pictureCheck,
                referencePriceCheck : this.state.referencePriceCheck
            },
            referencePrice : this.state.referencePrice,
            icon : this.state.icon,
            HourlyPremium:{
                premiumsWeekday : premium,
                premiumsWeekend : null
            },
            prototypeServiceName : this.getPrototypeServiceName.bind(this)(),           
        };
        let smeta = {
            //新添加服务类型的提成
            Commission: {
                [this.state.commissionForONL]: {
                    [commissionForType[this.state.commissionForONL]]: parseFloat(this.state.commissionValForONL).toFixed(2),
                },
                [this.state.commissionForOFL]: {
                    [commissionForType[this.state.commissionForOFL]]: parseFloat(this.state.commissionValForOFL).toFixed(2),
                }
            },
        }
        var data = {
            dname: this.state.dname,
            name: this.state.name,
            cost0 : parseFloat(this.state.cost0),
            shop : shop,
            duration: this.changeToMs.bind(this)(this.state.duration),
            dd: !this.state.dd,
            servicePrototype : this.state.servicePrototype,
            workload : parseFloat(this.state.workload),
            meta: meta,
            smeta: smeta,
        };
        if(this.state.nameCheck)
            delete data.name;
        if(this.state.dnameCheck)
            delete data.dname;
        if(this.state.costCheck)
            delete data.cost0;
        if(this.state.durationCheck)
            delete data.duration;
        if(this.state.workloadCheck)
            delete data.workload;
        if(this.state.descriptionCheck)
            delete data.meta.description;
        if(this.state.iconChangeCheck)
            delete data.meta.icon;
        if(this.state.pictureCheck)
            delete data.meta.hashed;
        if(this.state.referencePriceCheck)
            delete data.meta.referencePrice;
        var _this = this;
        var url;
        if (this.props.params.id) {
            url = ROOTURL + 'serv/shop/instance.api?id=' + this.props.params.id;
            data.id = this.props.params.id
        } else {
            url = ROOTURL + 'serv/shop/instance.api'
        }
        fetch(url, {
            method: 'POST',
            body: JSON.stringify(data)
        }).then(function (res) {
            if (res.ok) {
                console.log('保存成功');
                alert('保存成功');
                location.href = '/ShopServiceM'
            } else {
                console.log(res.status)
            }
        }).catch(function (error) {
            console.log('Request failed', error);
        });

    }

    handleIconSave(callback){
        var _this = this;
        const imgfile_url = this.state.iconPreview;
        const imgfile = this.state.iconFile;

        if(!imgfile || !imgfile_url){
            callback();
            return;
        }
        var img = new Image();
        img.src = imgfile_url;
        const width = img.width;
        const height = img.height;
        var fd = new FormData();
        var xhr = new XMLHttpRequest();
        xhr.open("POST", ROOTURL + "asset/images/upload.api?width=" + width + "&height=" + height + "&noShrink=" + true);

        fd.append("file", imgfile);
        xhr.send(fd);
        xhr.onload = function (data) {
            var status = data.currentTarget.status;
            if (status == 200) {
                var res_hashed = JSON.parse(data.currentTarget.response).hashed;
                _this.setState({
                    icon: res_hashed
                });
                callback();
            }
            else {
                console.log('图标保存失败:'+data);
                callback();
            }
        }
    }

    handlesave() {
        var _this = this;
        const imgfile_url = this.state.previewImgUrl;
        const imgfiles = this.state.previewImgFiles;
        var j = 0;
        for (var i = 0; i < imgfiles.length; i++) {
            var img = new Image();
            img.src = imgfile_url[i].src;
            const width = img.width;
            const height = img.height;
            console.log(width, height);
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open("POST", ROOTURL + "asset/images/upload.api?width=" + width + "&height=" + height + "&noShrink=" + true);
            var f = imgfiles[i];
            fd.append("file", f);
            xhr.send(fd);
            xhr.onload = function (data) {
                var status = data.currentTarget.status;
                if (status == 200) {
                    var imageList = _this.state.previewImgUrl;
                    var imgData = _this.state.previewImgUrl[j];
                    imageList[j] = imgData;
                    imgData.msg = '保存成功';
                    _this.setState({
                        previewImgUrl: imageList
                    });
                    j++;
                    var res = data.currentTarget.response;
                    var res_json = JSON.parse(res);
                    var res_hashed = res_json.hashed;
                    _this.setState({
                        imgHash: _this.state.imgHash.concat(res_hashed)
                    });
                    if (j == imgfiles.length) {
                        _this.handleIconSave(_this.createStore.bind(_this))
                    }
                }
                else {
                    var imageList = _this.state.previewImgUrl;
                    var imgData = _this.state.previewImgUrl[j];
                    imageList[j] = imgData;
                    imgData.msg = '保存失败';
                    _this.setState({
                        previewImgUrl: imageList
                    });
                    j++;

                    if (j == imgfiles.length) {
                        _this.handleIconSave(_this.createStore.bind(_this))
                    }
                }
            }
        }
        if (!imgfiles.length) {
            _this.handleIconSave(_this.createStore.bind(_this))
        }
    }

    handleStoreDelete() {
        var url = ROOTURL + 'serv/shop/instance.api?id=' + this.props.params.id;
        this.setState({
            delete: !this.state.delete
        });
        fetch(url, {
            method: 'delete',
            // mode : 'no-cors',
            body: JSON.stringify({})
        }).then(res=> {
            if (res.ok) {
                res.json().then(data=> {
                    console.log(data);
                    location.href = '/ShopServiceM'+shop
                })
            }
        })
    }

    deleteImg(key) {
        var newFiles = this.state.imgHash;
        newFiles.splice(key, 1);
        this.setState({
            imgFiles: newFiles
        })
    }

    handleDisabled(bol,name,value){
        if(bol){
            var obj = {};
            obj[name] = value;
            this.setState(obj);
        }
    }

    getPrototypeServiceName(){
        var name = '';
        this.state.prototypeServiceList.map(s=>{
            if(s.id == this.state.servicePrototype){
                name = s.dname;
            }
        });
        return name;
    }

    premiumTable(){
        // var data = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'
        //     ,'13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
        // var data = [
        //     ['00:00','01:00','02:00','03:00','04:00','05:00'],
        //     ['06:00','07:00','08:00','09:00','10:00','11:00']
        // ];
        var data = [
            ['时段1','时段2','时段3','时段4','时段5','时段6'],
            ['时段7','时段8','时段9','时段10','时段11','时段12']
        ];
        var tBody = [];
        var _this = this;
        for(var i = 0; i < 2; i++){
            tBody.push(<tr key={i}>{data[i].map((time,index)=>{
                return (function(i){
                    return (<td key={index+i*6}><TextInput style={{width:'100px'}} placeHolder={time} disabled={preview} val={_this.state['premium'+(index+i*6)]?_this.state['premium'+(index+i*6)]:0}
                                                       type="number" onChange={(val)=>{var d={};d['premium'+(index+i*6)] = val;_this.setState(d)}}/></td>)
                })(i)
            })}</tr>)
        }
        return tBody;
    }

    render() {console.log("门店服务" + "渲染" + this.state.page);
        console.log(this.state)
        return (
            <div className="right-wapper" style={{height:'auto'}}>

                <div className="wrap" style={{position:'relative'}}>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>服务原型</label>
                        <SelectInput optionsData={this.getOptions()} disabled={preview}
                                     val={this.state.servicePrototype}
                                     onChange={val=>{this.setState({servicePrototype:val});this.handleSelectChange.bind(this)(val,true)}}/>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>内部标识</label>
                        <TextInput inputId="phone" placeHolder="请输入内部标识" val={this.state.name} disabled={preview |this.state.nameCheck}
                                   onChange={val=>this.setState({name: val})} />
                        <CheckboxInput id="nameCheck" style={{marginLeft:'10px'}} isCheck={this.state.nameCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({nameCheck:val});this.handleDisabled.bind(this)(val,'name',this.state.servicePrototypeData.name)}}/>
                        <label htmlFor="nameCheck">使用默认值</label>
                    </div>

                    <div className={style['input_div']} id="address">
                        <label style={{width:'110px'}}>服务显示名</label>
                        <TextInput inputId="place" placeHolder="请输入服务显示名" val={this.state.dname} disabled={preview |this.state.dnameCheck}
                                   onChange={val=>this.setState({dname: val})}/>
                        <CheckboxInput id="dnameCheck" style={{marginLeft:'10px'}} isCheck={this.state.dnameCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({dnameCheck:val});this.handleDisabled.bind(this)(val,'dname',this.state.servicePrototypeData.dname)}}/>
                        <label htmlFor="dnameCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>基础价格</label>
                        <TextInput inputId="place" placeHolder="请输入基础价格" val={this.state.cost0} disabled={preview |this.state.costCheck}
                                   onChange={val=>this.setState({cost0: val})}/>
                        <CheckboxInput id="costCheck" style={{marginLeft:'10px'}} isCheck={this.state.costCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({costCheck:val});this.handleDisabled.bind(this)(val,'cost0',this.state.servicePrototypeData.cost0)}}/>
                        <label htmlFor="costCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>参考价格</label>
                        <TextInput inputId="place" placeHolder="请输入参考价格" val={this.state.referencePrice} disabled={preview |this.state.referencePriceCheck}
                                   onChange={val=>this.setState({referencePrice: val})}/>
                        <CheckboxInput id="referencePriceCheck" style={{marginLeft:'10px'}} isCheck={this.state.referencePriceCheck? true: false} disabled={preview}
                                       onChange={(val)=>{this.setState({referencePriceCheck:val});this.handleDisabled.bind(this)(val,'referencePrice',this.state.servicePrototypeData.meta.referencePrice)}}/>
                        <label htmlFor="referencePriceCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>服务时长</label>
                        <TextInput inputId="place" placeHolder="请输入服务时长" val={this.state.duration} disabled={preview |this.state.durationCheck}
                                   onChange={val=>this.setState({duration: val})}/>
                        <CheckboxInput id="durationCheck" style={{marginLeft:'10px'}} isCheck={this.state.durationCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({durationCheck:val});this.handleDisabled.bind(this)(val,'duration',this.changeToMin.bind(this)(this.state.servicePrototypeData.duration))}}/>
                        <label htmlFor="durationCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>并行工作荷载</label>
                        <TextInput inputId="place" placeHolder="请输入并行工作荷载" val={this.state.workload} disabled={preview | this.state.workloadCheck}
                                   onChange={val=>this.setState({workload: val})}/>
                        <CheckboxInput id="workloadCheck" style={{marginLeft:'10px'}} isCheck={this.state.workloadCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({workloadCheck:val});this.handleDisabled.bind(this)(val,'workload',this.state.servicePrototypeData.workload)}}/>
                        <label htmlFor="workloadCheck">使用默认值</label>
                    </div>

                    <div className={style['input_div']}>
                        <label style={{width:'110px',float:'left'}}>服务类型图标</label>
                        <div style={{width:'316px',float:'left'}}>
                            <span style={{display:'inline-block'}}>
                            <img style={{maxWidth: '50px',maxHeight:'50px'}}
                                 src={!this.state.iconHasChanged && this.state.icon ?
                                      ROOTURL + 'asset/images/get.api?hashed=' + this.state.icon : this.state.iconPreview}/></span>
                            <button className={style['main_btn']} disabled={preview|this.state.iconChangeCheck}
                                    style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3',float:'right'} }
                            >更换<FileInput  disabled={preview |this.state.iconChangeCheck}
                                           type="file" noMultiple={true}
                                           fileClass={style['imgUploader-btn']}
                                           accept=".jpg,.png,.jpeg,.gif,.bmp"
                                           onChange={(files)=>this.handleIconUpload(files)}/>
                            </button>
                        </div>
                        <CheckboxInput id="iconChangeCheck" style={{marginLeft:'10px'}} isCheck={this.state.iconChangeCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({iconChangeCheck:val});this.handleDisabled.bind(this)(val,'icon',this.state.servicePrototypeData.meta.icon)}}/>
                        <label htmlFor="iconChangeCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>文字描述</label>
                        <TextareaInput id="intro" textareaClass={style.description} val={this.state.description} disabled={preview |this.state.descriptionCheck}
                                       onChange={val=>this.setState( {description: val})}/>
                        <CheckboxInput id="descriptionCheck" style={{marginLeft:'10px'}} isCheck={this.state.descriptionCheck} disabled={preview}
                                       onChange={(val)=>{this.setState({descriptionCheck:val});this.handleDisabled.bind(this)(val,'description',this.state.servicePrototypeData.meta.description)}}/>
                        <label htmlFor="descriptionCheck">使用默认值</label>
                    </div>
                    <div className={style['input_div']}>
                        <p>
                            <label style={{width:'110px'}}>线上订单提成</label>
                            <TextInput name="commission" type="text" val={this.state.commissionValForONL} onChange={(val)=>{this.setState({commissionValForONL:val})}} />&nbsp;
                            <label style={{width: '55px'}} htmlFor="FixedCommissionONL">按数值</label><input name="commissionForONL" id="FixedCommissionONL" type="radio" onClick={()=>{this.setState({commissionForONL:'FixedCommissionONL'})}} checked={this.state.commissionForONL=='FixedCommissionONL'? true:false} />
                            &nbsp;&nbsp;
                            <label style={{width: '55px'}} htmlFor="RatioCommissionONL">按比例</label><input name="commissionForONL" id="RatioCommissionONL" type="radio" onClick={()=>{this.setState({commissionForONL:'RatioCommissionONL'})}} checked={this.state.commissionForONL=='RatioCommissionONL'? true:false} />
                        </p>
                        <p>
                            <label style={{width:'110px'}}>线下订单提成</label>
                            <TextInput name="commission" type="text" val={this.state.commissionValForOFL} onChange={(val)=>{this.setState({commissionValForOFL:val})}} />&nbsp;
                            <label style={{width: '55px'}} htmlFor="FixedCommissionOFL">按数值</label><input name="commissionForOFL" id="FixedCommissionOFL" type="radio" onClick={()=>{this.setState({commissionForOFL:'FixedCommissionOFL'})}} checked={this.state.commissionForOFL=='FixedCommissionOFL'? true:false} />
                            &nbsp;&nbsp;
                            <label style={{width: '55px'}} htmlFor="RatioCommissionOFL">按比例</label><input name="commissionForOFL" id="RatioCommissionOFL" type="radio" onClick={()=>{this.setState({commissionForOFL:'RatioCommissionOFL'})}} checked={this.state.commissionForOFL=='RatioCommissionOFL'? true:false} />
                        </p>
                    </div>
                    <div className={style['input_div']}>
                        <label style={{width:'110px'}}>繁忙时段溢价</label>
                        <Table tBody={this.premiumTable.bind(this)()} />
                    </div>
                    <div className={style['checkbox_div']} style={{marginBottom:'20px'}}>
                        <CheckboxInput id="enabled" isCheck={this.state.dd} disabled={preview}
                                       onChange={val=>this.setState({dd: val})}/>
                        <label htmlFor="enabled">启用</label>
                    </div>
                    <button id="submit" className={style['main_btn']} disabled={preview}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }
                            onClick={this.handlesave.bind(this)}>保存
                    </button>
                    {this.props.params.id ? <button id="delete" className={style['main_btn']} disabled={preview}
                                                    style={{backgroundColor: '#f2846f',border: '1px solid #d55c44'} }
                                                    onClick={()=>this.setState({delete: !this.state.delete})}>
                        删除</button> : null}
                    <button id="back" className={style['main_btn']} onClick={e=>window.history.go(-1)}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }>返回
                    </button>
                </div>
                <div className="wrap">

                    <button id="upload" className={style['main_btn']} disabled={preview |this.state.pictureCheck}
                            style={{backgroundColor: '#2285c7',border: '1px solid #1e77b3'} }>图片选择上传 <FileInput
                        type="file" disabled={preview |this.state.pictureCheck}
                        fileClass={style['imgUploader-btn']}
                        accept=".jpg,.png,.jpeg,.gif,.bmp"
                        onChange={(files)=>this.handleImgUpload(files)}/>
                    </button>
                    <span className={style['tips']} style={{marginLeft:"10px",display:'inline-block'}}>每次上传和删除图片后，请点击上方“保存”按钮进行保存</span>
                    <CheckboxInput id="pictureCheck" style={{marginLeft:'10px'}} isCheck={this.state.pictureCheck}  disabled={preview}
                                   onChange={(val)=>{this.setState({pictureCheck:val});this.handleDisabled.bind(this)(val,'imgHash',this.state.servicePrototypeData.meta.hashed)}}/>
                    <label htmlFor="pictureCheck">使用默认值</label>
                    <h3 className='catagory' style={{marginTop:"10px"}}><span className='cata-title'>上传图片列表</span></h3>
                    <ul id="fileList" className={style['img_list']}>
                        {this.state.previewImgUrl.length > 0 ? this.state.previewImgUrl.map((img, index)=> {
                            return <ImageWithState src={img.src} stateMsg={img.msg} id={index} key={index}/>
                        }) : null}
                    </ul>

                    <h3 className='catagory' style={{marginTop:"10px"}}><span className='cata-title'>服务图片列表</span></h3>
                    <ul id="imglist" className={style['img_list']}>
                        {this.state.imgHash.length > 0 ? this.state.imgHash.map((url, index)=> {
                            var src = ROOTURL + 'asset/images/get.api?hashed=' + url;
                            return <ImageWithState onClick={this.deleteImg.bind(this,index)} src={src}
                                                   deleteBtn={true} key={index}/>

                        }) : null}
                    </ul>
                </div>
                { this.state.delete ?
                    <div id={style.msgDialog}>
                        <div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>删除提示？</h3><p id={style['msgDialog_content']}>确认删除？</p>
                            <div className={style['msgDialog_button']}>
                                <button id={style['msgDialog_yes']} onClick={this.handleStoreDelete.bind(this)}>确定</button>
                                <button id={style['msgDialog_no']} onClick={()=>this.setState({delete: !this.state.delete})}>取消</button>
                            </div>
                        </div>
                    </div> : null}
            </div>
        )
    }
}

export default ShopServiceEditor
